<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="../template.js"></script>
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body onload="load()">
<div class="date container">
    <div class="yearMonth"><input type="text" id="title" /></div>
    <div class="title clearfix">
        <div class="titleL"><a>上一月</a></div>
        <div class="titleM"></div>
        <div class="titleR"><a>下一月</a></div>
    </div>
    <ul class="weekday list-inline"></ul>
    <ul class="date-days list-inline"></ul>
</div>
<script type="text/html" id="list">
    {{each list as value}}
    <li>{{value}}</li>
    {{/each}}
</script>
<script>
  //time 2016-12-1
  var getNextMonth = function(time){
      var d = new Date(time);
      var year = d.getFullYear();
      var month = d.getMonth()+1;
      var nextMonth = (month)%12 + 1;
      if(month == 12){
          year = year + 1;
      }
      return  year + "-" + Math.abs((month)%12 + 1) + "-" + d.getDate();
  }
  //输入：2016-12-1 ,输出：2017-1-1    输入：2016-1-1，输出：2016-2-1   输入：2016-11-28.输出：2016-12-28

  var getLastMonthDays = function(time){
      var d = new Date(time);
      var month = d.getMonth()+1;
      var newYDM = d.getFullYear() + "-" + month + "-" +"1";
      return  (new Date((new Date(newYDM)).getTime() - 86400000)).getDate();
  }
  var isNull = function(time){
      var d;
      if(time == undefined){
          d = new Date();
      }
      else{
          d = new Date(time);
      }
      return d ;
  }
  var getNextMonthDays = function(time,currentMonth){
      var d = isNull(time);
      var month = d.getMonth()+1;
      var newYDM = d.getFullYear() + "-"  + month + "-" + "28";
      var nextYDM = new Date(newYDM);
      while( nextYDM.getMonth() +1 == month){
          newYDM = nextYDM.getTime() + 86400000;
          nextYDM = new Date(newYDM);
      }
      var nextMonth = nextYDM.getMonth();
      if(currentMonth == "true"){
          nextMonth = nextMonth + 1;
      }
      else{
          nextMonth = nextMonth + 2;
      }
      return getLastMonthDays(nextYDM.getFullYear() + "-"  + nextMonth+"-" +"1");
  }

  var fillFrontDay = function(time){
      var d = isNull(time);
      var newTime = d.getFullYear() + "-" + Math.abs(d.getMonth() + 1) + "-1";
      var idx = new Date(newTime).getDay();
      var arr = [];
      for(var i=0 ;i<idx;i++){
          arr.unshift(getLastMonthDays(newTime)-i);
      }
      return arr;
  }

  var fillBackDay = function(time){
      var d = isNull(time);
      var idx = 6-new Date(d.getFullYear() + "-" + Math.abs(d.getMonth() + 1) + "-"+ getNextMonthDays(time,"true")).getDay();
      var arr = [];
      for(var i =0 ;i<idx ; i++){
          arr.push(i+1);
      }
      return arr ;
  }
  var fillDay = function(time){
      var days = getNextMonthDays(time,"true");
      var arr = [];
      for(var i = 0 ;i<days; i++){
          arr.push(i+1);
      }
      return arr;
  }

  var dates = function(time){
      var arrFillFront = fillFrontDay(time);
      var arrFillBack = fillBackDay(time);
      var arr = fillDay(time);
      for(var i = arrFillFront.length - 1 ; i >=  0; i--){
          arr.unshift(arrFillFront[i]);
      }
      for(var j = 0 ; j<arrFillBack.length; j++){
          arr.push(arrFillBack[j]);
      }
      return arr;
  }
  var getYearMonth = function(time){
      var d = isNull(time);
      return d.getFullYear() + "年" + Math.abs(d.getMonth() + 1) + "月";
  }

  $(".weekday").html(
          template("list",{
              list:["日","一","二","三","四","五","六"]
          })
  );

var load = function(){
    $(".date-days").html(
            template("list",{
                list: dates()
            })
    );
    $(".titleM").html(getYearMonth());
    var i = fillFrontDay().length;
    var days = getNextMonthDays("true") + fillFrontDay().length;
    for(i;i<days;i++){
        $(".date-days").children().eq(i).attr("class","see");
    }
}

 $("#title").on("change",function(){
     $(".date-days").html(
             template("list",{
                 list: dates( $("#title").val())
             })
     );
     $(".titleM").html(getYearMonth($("#title").val()));
 });
</script>
</body>
</html>